<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="adddrug system">
            <home-bar :currentPage='currentPage'></home-bar>
            <div class="adddrugs system-main">
                <div class="main-position">
                    首页 > 药品管理 > 产品种类管理
                </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/druglistai/druglist" @click.native="addPath('/druglistai/druglist','药品管理');">
                                <li>药品列表</li>
                            </router-link>
                            <router-link to="/stockmanagement" @click.native="addPath('/stockmanagement','药品管理');">
                                <li>进货管理</li>
                            </router-link>
                            <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                                <li>已删除药品</li>
                            </router-link>
                            <router-link to="/druglistai/shangjia" @click.native="addPath('/druglistai/shangjia','药品管理');">
                                <li>已上架</li>
                            </router-link>
                            <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                                <li>已下架</li>
                            </router-link>
                            <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                                <li>缺货药品</li>
                            </router-link>
                            <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                                <li>库存预警</li>
                            </router-link>
                            <router-link to="/willexpire" @click.native="addPath('/willexpire','药品管理');">
                                <li>即将过期药品</li>
                            </router-link>
                            <router-link to="/expired" @click.native="addPath('/expired','药品管理');">
                                <li>已过期药品</li>
                            </router-link>
                            <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                                <li class="active">产品种类管理</li>
                            </router-link>
                            <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                                <li>品牌库</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="drugListMain">
                        <div class="headOperation">
                            <a href="javascript:void(0);" class="OperationA-application" @click="clickApplication">申请添加分类</a>
                        </div>
                        <!--/.headOperation -->
                        <div class="drugListTable productCategoryMgmtTable">
                            <table>
                                <tr>
                                    <td>序号</td>
                                    <td>分类名称</td>
                                    <td>产品类型</td>
                                    <td>二级类目数量</td>
                                    <td>三级类目数量</td>
                                    <td>药品数量</td>
                                    <td>操作</td>
                                </tr>
                                <tr v-for="(trading,index) in tableList" :key="index">
                                    <td width="100">{{index + 1}}</td>
                                    <td>{{trading.one}}</td>
                                    <td>{{trading.two}}</td>
                                    <td>{{trading.three}}</td>
                                    <td>{{trading.four}}</td>
                                    <td>{{trading.five}}</td>
                                    <td>
                                        <router-link to="/productcategorymgmt/leveltwo" @click.native="addPath('/productcategorymgmt/leveltwo','药品管理');">进入查看</router-link>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="pageBotom">
                            <div class="pageBotomRight">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
            <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 申请添加分类弹窗 -->
                <div class="ApplicationPopup" v-show="showApplicationPopup">
                    <div class="ApplicationPopupInner">
                        <div class="ApplicationItem clear">
                            <span>分类名称</span>
                            <el-input v-model="categoryNameValue" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="ApplicationItem clear">
                            <span>药品类型</span>
                            <el-select v-model="drugTypeValue" placeholder="请选择">
                                <el-option v-for="item in drugTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="system-messagebox1-btn clear">
                            <div @click="clickSubmit">提交</div>
                            <div @click="hideSystemPopup">取消</div>
                        </div>
                    </div>
                </div>
                <!-- 申请添加分类成功弹窗 -->
                <div class="okPopup" v-show="showApplicationOkPopup">
                    <i class="iconfont icon-ok"></i>
                    <h3>提交成功</h3>
                    <span class="spanContent">提交成功后需进行人工审核，请您耐心等候。</span>
                    <div class="system-messagebox1-btn clear">
                        <div @click="hideSystemPopup">确定</div>
                    </div>
                </div>
            </div>
            <!-- 弹窗结束 -->
        </div>
    </div>
</template>

<script>
    import topBar from "../../../public/top";
    import leftBar from "../../../public/left";
    import homeBar from "../../../public/homebar";
    export default {
        components: {
            leftBar,
            topBar,
            homeBar
        },
        data() {
            return {
                data: "drugManagment",
                currentPage: {
                    path: "/productcategorymgmt",
                    name: "药品管理"
                },
                tableList: [{
                        id: "1",
                        one: "药品",
                        two: "通用类型",
                        three: "10000",
                        four: "2000",
                        five: "256"
                    },
                    {
                        id: "2",
                        one: "医疗器械",
                        two: "通用类型",
                        three: "1000",
                        four: "2000",
                        five: "256"
                    }
                ],
                drugTypeOptions: [{
                        value: "选项1",
                        label: "黄金糕"
                    },
                    {
                        value: "选项2",
                        label: "双皮奶"
                    },
                    {
                        value: "选项3",
                        label: "蚵仔煎"
                    },
                    {
                        value: "选项4",
                        label: "龙须面"
                    },
                    {
                        value: "选项5",
                        label: "北京烤鸭"
                    }
                ],
                drugTypeValue: "",
                currentPage4: 1,
                showSystemPopup: false,
                showApplicationPopup: false,
                showApplicationOkPopup: false,
                categoryNameValue: "",
                systemPopupTitle: ""
            };
        },
        mounted() {},
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            addPath(n1, n2) {
                //点击切换home-bar
                var obj = {};
                obj.n1 = n1;
                obj.n2 = n2;
                this.$store.commit("addPath", obj);
            },
            //点击申请添加分类
            clickApplication() {
                this.showSystemPopup = true;
                this.showApplicationPopup = true;
                this.systemPopupTitle = "申请添加分类";
            },
            //点击提交
            clickSubmit() {
                this.showApplicationPopup = false;
                this.showApplicationOkPopup = true;
                this.systemPopupTitle = "提交成功";
            },
            //关闭弹窗
            hideSystemPopup() {
                this.showSystemPopup = false;
                this.showApplicationPopup = false;
                this.showApplicationOkPopup = false;
            }
        }
    };
</script>
<style lang="less">
    @import "../../css/drugList.less";
</style>
